<template>
  <el-form :inline="true">
      <el-form-item>
        <selector 
         placeholder="请选择题目难度" 
         style="width: 200px;"
         v-model="params.difficulty"></selector>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入您要搜索的题目标题" v-model="params.title" />
      </el-form-item>
      <el-form-item>
        <el-button plain @click="onSearch">搜索</el-button>
        <el-button plain @click="reset" type="info">重置</el-button>
        <el-button plain 
         type="primary" 
         :icon="Plus"
         @click="onAdd">添加题目</el-button>
      </el-form-item>
  </el-form>
  <el-table height="526px" :data="questionList">
    <el-table-column prop="questionId" width="180px" label="题目id" />
    <el-table-column prop="title" label="题目标题" />
    <el-table-column prop="difficulty" label="题目难度" width="90px">
      <template #default="{ row }">
        <div v-if="row.difficulty === 1" style="color:#3EC8FF;">简单</div>
        <div v-if="row.difficulty === 2" style="color:#FE7909;">中等</div>
        <div v-if="row.difficulty === 3" style="color:#FD4C40;">困难</div>
      </template>
    </el-table-column>
    <el-table-column prop="createName" label="创建人" width="140px" />
    <el-table-column prop="createTime" label="创建时间" width="180px" />
    <el-table-column label="操作" width="100px" fixed="right">
      <template #default="{ row }">
        <el-button type="text" @click="onEdit(row.questionId)">编辑</el-button>
        <el-button type="text" class="red" @click="onDelete(row.questionId, row.title)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background 
   layout="total, sizes, prev, pager, next, jumper" 
   :page-sizes="[1, 5, 10, 15, 20]"
   :total="total"
   size="small" 
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   v-model:current-page="params.pageNum"
   v-model:page-size="params.pageSize"
  />
  <!-- 添加题目的抽屉 -->
  <question-drawer 
   ref="questionDrawerRef"
   @success="onSuccess"></question-drawer>
</template>

<script setup>
    import { Plus } from "@element-plus/icons-vue"
    import Selector from "@/components/QuestionSelector.vue"
    import { reactive, ref } from "vue"
    import { deleteQuestionService, getQuestionListService } from "@/api/question"
    import QuestionDrawer from "@/components/QuestionDrawer.vue"
    import { ElMessageBox } from "element-plus"
    const params = reactive({
        difficulty: '',
        title: '',
        pageSize: 10,
        pageNum: 1
    })
    const questionDrawerRef = ref(null)

    const questionList = ref([])

    const total = ref(0)

    const onSuccess = service => {
      if (service === 'add') {
        params.pageNum = 1
      }
      getQuestionList()
    }

    const onAdd = () => questionDrawerRef.value.open()

    const onEdit = async questionId => questionDrawerRef.value.open(questionId)

    const onDelete = async (questionId, title) => {
      await ElMessageBox.confirm(
        `确定要删除题目: ${title} 吗？`,
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      await deleteQuestionService(questionId)
      ElMessage.success('删除成功')
      params.pageNum = 1
      await getQuestionList()
    }

    const getQuestionList = async () => {
        const result = await getQuestionListService(params)
        questionList.value = result.rows
        total.value = result.total
    }
    getQuestionList()

    const handleSizeChange = newPageSize => {
      params.pageNum = 1
      getQuestionList()
    }

    const handleCurrentChange = newPageNum => {
      params.pageNum = newPageNum
      getQuestionList()
    }

    const onSearch = () => {
      params.pageNum = 1
      getQuestionList()
    }


    const reset = () => {
      params.difficulty = ''
      params.title = ''
      params.pageSize = 10
      params.pageNum = 1
      getQuestionList()
    }
    


</script>